<template>
  <div id="Know">
    <!-- 站内导航 -->
    <div class="TopNav">
      <TopNav></TopNav>
    </div>
    <!-- 菜单 -->
    <div class="LeftMenu">
      <LeftMenu></LeftMenu>
    </div>
    <!-- 中部菜单 -->
    <div class="MidMenu">
      <MidMenu></MidMenu>
    </div>
    <!--知识章节-->
    <div class="knowChapter">
      <router-link :to="'/know?type='+ query.type">
        <img src="src/assets/image/sunBook.png" alt="" style="width: 100%;height: 100px;cursor: grab">
        <h3 style="color: blue; cursor: grab;margin: 0">{{ query.subtype }}</h3>
        <hr style="border: thin lightyellow solid; margin:3px;">
      </router-link>
      <div v-for="(it, i) in fileData" :key="i" @click="detail(it.id)" class="knowTitle" :style="it.mapData.style">
        <el-divider direction="vertical"></el-divider>
        <span>{{ it.title }}</span>
        <el-divider direction="vertical"></el-divider>
      </div>
    </div>
    <!-- 知识文章 -->
    <div class="knowText">
      <div style="padding-left: 10px;">
        <h4 style="">{{ knowData.title }}</h4>
        <h5>概要</h5>
        <p>{{ knowData.blurb }}</p>
        <hr style="border: thin grey dotted; margin-left:-10px;">
        <div v-html="knowData.content"></div>
        <div v-if="knowData.extend">
          <hr style="border: thin grey dotted; margin-left:-10px;">
          <h5>拓展</h5>
          <div v-html="knowData.extend"></div>
        </div>
      </div>
    </div>
    <!-- 页脚 -->
    <div class="Footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import LeftMenu from '../../components/head/LeftMenu'
import TopNav from '../../components/head/TopNav'
import MidMenu from "../../components/head/MidMenu";
import Footer from '../../components/foot/Footer'
import knowledge from '../../apis/Knowledge'

export default {
  name: 'KnowledgeDetail',
  components: {LeftMenu, TopNav, MidMenu, Footer},

  data() {
    return {
      route: this.$route,
      query: this.$route.query,
      fileData: [],
      knowData: [],

    }
  },
  created() {
    this.subtypePage(this.query);

  },
  methods: {
    subtypePage(data) {
      knowledge.list(data).then((res) => {
        if (res.status === 200 && res.data.length > 0) {
          this.fileData = res.data;
          if (this.knowData.length === 0) {
            if (this.query.id) {
              this.$router.replace({query: {type: this.$route.query.type, subtype: this.$route.query.subtype}})
            }
            this.query.id = this.query.id ? this.query.id : this.fileData[0].id;
            this.detail(this.query.id);
          }
        } else {
          console.log(res);
        }
      })
    },
    detail(id) {
      this.titleStyle(id);
      this.query.id = id;
      knowledge.detail(this.query).then((res) => {
        if (res.status === 200 && res.data.data) {
          this.knowData = res.data.data;
        } else {
          console.log(res);
        }
      })
    },
    titleStyle(id) {
      this.fileData.forEach(i => {
        if (i.id.toString() === id.toString()) {
          i.mapData = {style: "color: deepskyblue;background: lightcyan;"}
        } else {
          i.mapData = {style: "color: steelblue;"}
        }
      })
    },
  }
  ,
}
</script>

<!-- Add "scoped"  attribute to limit CSS to this component only -->
<style scoped>
#Know {
  background: darkseagreen;
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  margin-left: -8px;
  margin-top: -8px;
}

.LeftMenu {
}

.TopNav {
}

.MidMenu {
}

.knowChapter {
  float: left;
  width: 12%;
  height: 85.9%;
  /*上右下左*/
  margin: 40px 1% 1% 15%;
  overflow: auto;
  text-align: center;
  background: aliceblue;
}

.knowTitle {
  height: 25px;
  font-size: 15px;
  cursor: pointer;
  border-top: thick solid aliceblue;
  border-bottom: medium solid lightyellow;
}

.knowTitle:hover {
  background: lightgreen;
}

.knowText {
  height: 86%;
  /*上右下左*/
  margin: 40px 15% 1% auto;
  overflow: auto;
  border-left: thin solid linen;
  background: snow;
}

.knowText a {
  color: yellowgreen;
  text-decoration: none;
}

a {
  color: snow;
  text-decoration: none;
}

</style>
